<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>衢州天气数据系统</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div id="app">
        <header>
            <h1>衢州天气数据系统</h1>
        </header>
        
        <main>
            <div class="container">
                <div class="module weather-list">
                    <h2>历史天气查询</h2>
                    <div class="search-box">
                        <select v-model="selectedYear">
                            <option v-for="year in years" :value="year">{{year}}年</option>
                        </select>
                        <select v-model="selectedMonth">
                            <option v-for="month in months" :value="month">{{month}}月</option>
                        </select>
                        <button @click="searchWeather" :disabled="loading">
                            {{ loading ? '加载中...' : '查询' }}
                        </button>
                    </div>
                    
                    <div v-if="error" class="error-message">
                        {{ error }}
                    </div>

                    <div v-if="statistics" class="statistics">
                        <h3>本月统计</h3>
                        <div class="stats-grid">
                            <div class="stat-item">
                                <span class="label">平均最高温：</span>
                                <span class="value">{{ statistics.平均最高温 }}℃</span>
                            </div>
                            <div class="stat-item">
                                <span class="label">平均最低温：</span>
                                <span class="value">{{ statistics.平均最低温 }}℃</span>
                            </div>
                            <div class="stat-item">
                                <span class="label">最高温度：</span>
                                <span class="value">{{ statistics.最高温度 }}℃</span>
                            </div>
                            <div class="stat-item">
                                <span class="label">最低温度：</span>
                                <span class="value">{{ statistics.最低温度 }}℃</span>
                            </div>
                        </div>
                    </div>

                    <div class="weather-table">
                        <table v-if="weatherData.length">
                            <thead>
                                <tr>
                                    <th>日期</th>
                                    <th>最高气温</th>
                                    <th>最低气温</th>
                                    <th>天气</th>
                                    <th>风向</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in weatherData" :key="item.日期">
                                    <td>{{ item.日期 }}</td>
                                    <td>{{ item.最高气温 }}</td>
                                    <td>{{ item.最低气温 }}</td>
                                    <td>{{ item.天气 }}</td>
                                    <td>{{ item.风向 }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <div v-else-if="!loading" class="no-data">
                            暂无数据
                        </div>
                    </div>
                </div>

                <div class="module weather-chart">
                    <h2>天气数据图表</h2>
                    <div class="chart-row">
                        <div id="lineChart" class="chart"></div>
                    </div>
                    <div class="chart-row">
                        <div id="pieChart" class="chart"></div>
                    </div>
                    <div class="chart-row">
                        <div id="roseChart" class="chart"></div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="main.js"></script>
</body>
</html> 